<template>
  <div class="iframe-container" v-loading="spinning">
    <iframe
      ref="iframeRef"
      :src="props.src"
      :allowfullscreen="props.fullscreen"
      loading="lazy"
      v-bind="$attrs"
      style="width: 100%; height: 100%; border: none"
      @load="() => setSpinning(false)"
    />
  </div>
</template>

<script setup>
import { useState } from '@/hooks';
import { ref } from 'vue';

defineOptions({
  name: 'RIFrame',
  inheritAttrs: false
});

const props = defineProps({
  src: {
    type: String,
    default: '',
    required: true
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
});
const iframeRef = ref(null);
const [spinning, setSpinning] = useState(true);
</script>

<style scoped lang="scss">
.iframe-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  :deep(.loading-spinner-inner) {
    width: 100%;
    height: 100%;

    .ant-spin-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
